<template>
   <div class="user-profile">
      <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick">
         <el-tab-pane label="账号设置" name="accountSetting">
            <div class="form-wrap" v-loading="loading">
               <el-scrollbar>
                  <BasicInfoCard ref="basicInfoCardRef" v-model="formInline" />
                  <WorkConditionCard v-model="formInline" />
                  <EducationCard v-model="formInline" />
                  <ContactInforCard v-model="formInline" />
                  <PSCCertificateCard v-model="formInline" />
                  <NCRECertificateCard v-model="formInline" />
                  <div class="btns text-center">
                     <el-button type="primary" @click="submitSaveForm">保存</el-button>
                     <el-button>退出登录</el-button>
                  </div>
               </el-scrollbar>
            </div>
         </el-tab-pane>
         <el-tab-pane label="修改密码" name="changePassword">
            <PasswordTab ref="resetPasswordRef" />
         </el-tab-pane>
      </el-tabs>
   </div>
</template>

<script setup name="Profile">
import PasswordTab from './components/passwordTab.vue'
import BasicInfoCard from "./components/basicInfoCard.vue";
import WorkConditionCard from "./components/workConditionCard.vue";
import ContactInforCard from "./components/contactInforCard.vue";
import EducationCard from "./components/educationCard.vue";
import PSCCertificateCard from "./components/pscCertificateCard.vue";
import NCRECertificateCard from "./components/ncreCertificateCard.vue";
import useUserStore from '@/store/modules/user'
import { updateUser } from "@/api/system/user";

const activeTab = ref("accountSetting");
const resetPasswordRef = ref(null)
function handleClick(e) {
   if (e.paneName === "changePassword") {
      resetPasswordRef.value.passwordFormRef.resetFields()
   }
}
const userStore = useUserStore()
const formInline = ref({})

async function getUserExamInfo() {
   let userInfoRes = await userStore.getInfo()
   formInline.value = userInfoRes.data.user
}
getUserExamInfo()

const basicInfoCardRef = ref(null)
const loading = ref(false)
function submitSaveForm() {
   loading.value = true
   basicInfoCardRef.value.submitValidate().then(() => {
      updateUser(formInline.value).then(res => {
         if (res.code === 200) {
            ElMessage({ message: res.msg, type: 'success' })
         }
         loading.value = false
      }).catch(() => {
         loading.value = false
      })
   }).catch((err) => {
      loading.value = false
      console.error(err);
   })
}
</script>
<style scoped lang="scss">
.user-profile {
   position: relative;
   height: calc(100vh - 189px);
   overflow: hidden;

   .demo-tabs {
      :deep(.el-tabs__content) {
         height: calc(100% - 40px);
         padding: 27px 41px;

         .el-tab-pane {
            height: 100%;
         }
      }

   }

   .card {
      border-radius: 8px;
      border: 1px solid #DDDDDD;
      margin-bottom: 20px;

      &:last-child {
         margin-bottom: 0;
      }

      :deep(.title) {
         color: #3872A9;
         font-size: 16px;
         font-weight: bold;
         margin-bottom: 24px;
      }
   }

   .form-wrap {
      height: 100%;
   }


}
</style>
